<template>
  <t-dialog
    v-model:visible="show"
    :width="500"
    :header="formData.id ? $t('common.update') : $t('common.create')"
    :onConfirm="() => form.submit()"
    destroyOnClose
    :closeOnOverlayClick="false"
  >
    <template #body>
      <t-form ref="form" :data="formData" :rules="formRule" label-align="top" @submit="onSubmit">
        <t-form-item :label="plugin.t('tax.name')" name="name">
          <t-input v-model="formData.name"/>
        </t-form-item>
        <div style="overflow: hidden">
          <t-row :gutter="20">
            <t-col :span="6">
              <t-form-item :label="plugin.t('tax.iva')" name="iva">
                <t-input-adornment append="%">
                  <t-input-number :value="Number(formData.iva)" @change="value => { formData.iva = value; onLaw() }" theme="column" style="width: 170px"/>
                </t-input-adornment>
              </t-form-item>
            </t-col>
            <t-col :span="6">
              <t-form-item :label="plugin.t('tax.req')" name="req">
                <t-input-adornment append="%">
                  <t-input-number :value="Number(formData.req)" @change="value => { formData.req = value; onLaw() }" theme="column" style="width: 170px" />
                </t-input-adornment>
              </t-form-item>
            </t-col>
          </t-row>
        </div>
        <t-form-item v-if="law" :label="plugin.t('tax.law')" name="law" style="margin-top: 20px">
          <t-select v-model="formData.law">
            <template v-for="(item, index) in plugin.tm('tax.law_text')" :key="index">
              <t-option v-if="item" :value="index" :label="item" />
            </template>
          </t-select>
        </t-form-item>
        <t-form-item :label="plugin.t('tax.sort')" name="sort" style="margin-top: 20px">
          <t-input-number v-model="formData.sort" />
        </t-form-item>
      </t-form>
    </template>
    <template #footer>
      <t-button theme="primary" :loading="loading" @click="form.submit()">
        {{ formData.id ? $t('common.update') : $t('common.create') }}
      </t-button>
    </template>
  </t-dialog>
</template>
<script setup>
  import { ref } from 'vue'
  import app from '@/app'
  import taxStore from '../../store/tax'
  import index from '../../index'

  const plugin = index.plugin

  const show = ref(false)
  const loading = ref(false)
  const form = ref(null)
  const formData = ref({})
  const formRule = {
    name: [{ required: true, message: ' ', type: 'error' }],
    iva: [{ required: true, message: ' ', type: 'error' }],
    req: [{ required: true, message: ' ', type: 'error' }],
    sort: [{ required: true, message: ' ', type: 'error' }],
  }
  const open = data => {
    formData.value = Object.assign({
      name: '', 
      iva: '0', 
      req: '0',
      sort: 0
    }, data)
    show.value = true

    onLaw()
  }

  const onSubmit = ({ validateResult }) => {
    if (validateResult === true) {
      loading.value = true
      taxStore.update(formData.value).then(res => {
        show.value = false
        app.message('success', 'message.' + res.message)
      }).catch(err => {
        app.message('error', 'message.error.' + err.message)
      }).finally(() => {
        loading.value = false
      })
    }
  }

  const law = ref(false)
  const onLaw = () => {
    if(Number(formData.value.req) == 0 && Number(formData.value.iva) == 0) {
      law.value = true
      formData.value.law = formData.value.law > 0 ? formData.value.law : 0
    } else {
      law.value = false
      formData.value.law = 0
    }
  }

  defineExpose({ open })
</script>